<template>
	<view class="page-box">
		<view class="login-box">
			<u--form :model="model" :rules="rules" ref="uForm" labelWidth="80" labelPosition="left" labelAlign="left">
				<u-form-item label="用户名" prop="username" borderBottom>
					<u--input v-model="model.username" border="none" placeholder="请输入用户名"></u--input>
				</u-form-item>
				<u-form-item label="密码" prop="password" borderBottom>
					<u--input v-model="model.password" border="none" type="password" placeholder="请输入密码"></u--input>
				</u-form-item>
			</u--form>
			<view class="btn-box">
				<u-button type="primary" @click="submit">提交</u-button>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			model: {
				username: ""
			},
			rules: {
				username: [{
					required: true,
					message: '请输入用户名',
					trigger: ['blur', 'change']
				}],
				password: [{
					required: true,
					message: '请输入密码',
					trigger: ['blur', 'change']
				}]
			}
		};
	},
	onReady() {
		//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
		this.$refs.uForm.setRules(this.rules)
	},
	methods: {
		submit() {
			this.$refs.uForm.validate().then(res => {
				uni.$u.toast('校验通过');
				uni.redirectTo({
					url: '/pages/index/index'
				})
			}).catch(errors => {
				uni.$u.toast('校验失败')
			})
		}
	},
}
</script>

<style lang="scss">
.page-box {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	.login-box {
		width: 80%;
	}

	.btn-box {
		margin-top: 40upx;
	}
}
</style>